<template>
  <div>
    <h1>App</h1>
    <h2>v3</h2>

    info.age <button @click="info.age++"> {{ info.age }}</button>
    <hr>
    info.size.w <button @click="info.size.w++"> {{ info.size.w }}</button>
  </div>
</template>

<script setup>
import { reactive, shallowReactive } from "vue";

const info = shallowReactive({
  name: 'jack',
  age: 20,
  size: {
    w: 100,
    h: 200
  }
});
console.log(info.name);
console.log(info.size.w);

setTimeout(() => {
  info.size = { w: 300, h: 400 };
}, 4000);


</script>